import React, { useEffect, useState } from "react";
import { Button, Icon } from "bigbear-ui";
import { Lesson } from "@/store/reducers/home";
import useGetWidth from "@/components/hooks/useGetWidth";
import VirtualList from "@/components/virtuallist";
import { Link } from "react-router-dom";
export interface LessonProps {
	children?: any;
	lessons?: any;
	getLessons?: any;
	container?: any;
}

function LessonList(props: LessonProps) {
	const width = useGetWidth();
	let start = 20 + (width / 10) * 7;
	const itemHeight = (width / 10) * 8;
	const forceUpdate = useState(0)[1];
	useEffect(() => {
		if (props.lessons.list.length === 0) {
			props.getLessons();
		}
		forceUpdate((x) => x + 1);
	}, [forceUpdate, props]);
	return (
		<section className="lesson-list">
			<div
				className="bigbear-layout-block-info"
				style={{ height: "1rem", lineHeight: "1rem", textAlign: "center" }}
			>
				<span>
					<Icon icon="atom" /> 全部课程
				</span>
			</div>
			{props.lessons.list === 0 && <Icon icon="spinner" spin></Icon>}
			<VirtualList
				startHeight={start}
				itemHeight={itemHeight}
				insightNumber={6}
				scrollbar={2}
				scrollDom={props.container.current}
			>
				{props.lessons.list.map((lesson: Lesson, index: number) => (
					<div key={index}>
						<Link to={{ pathname: `/detail/${lesson.id}`, state: lesson }}>
							<div style={{ height: "6rem", padding: "10px" }}>
								<img
									style={{ width: "100%", height: "100%", borderRadius: "10px" }}
									alt={lesson.title}
									src={lesson.poster}
									onClick={(e) => e.preventDefault()}
								></img>
							</div>
							<div
								className="bigbear-layout-block-default"
								style={{
									height: "2rem",
									padding: "10px",
									display: "flex",
									flexDirection: "column",
									justifyContent: "center",
									alignItems: "center",
								}}
							>
								<div>{lesson.title}</div>
								<div>{`价格: ${lesson.price}`}</div>
							</div>
						</Link>
					</div>
				))}
			</VirtualList>
			{props.lessons.hasMore ? (
				<Button onClick={props.getLessons} btnType="primary" style={{ width: "100%" }}>
					{props.lessons.loading ? <Icon icon="spinner" spin /> : "加载更多"}
				</Button>
			) : (
				<div
					className="bigbear-layout-block-warning"
					style={{ height: "1rem", lineHeight: "1rem", textAlign: "center" }}
				>
					到底了
				</div>
			)}
		</section>
	);
}
export default LessonList;
